<template>
  <div class="menu-item">
    <!-- 如果有监控，不显示在菜单中 -->
    <template v-if="item.link == 'videoMonitor'">
    </template>

    <template v-else-if="!item.children">
      <el-menu-item :index="restIndex(item.link)" v-bind:data-link="item.link">
        <i :class="'icon-'+restIndex(item.link)" class="iconfont"></i>
        {{item.resourceName.replace('单位', '').replace('支队', '')}}
      </el-menu-item>
    </template>

    <el-submenu v-else :index="restIndex(item.link)" v-bind:data-link="item.link" popper-class="header-nav-son-item ">
      <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
      <template slot="title" >
        <i v-if="!item.parentId" :class="'icon-'+restIndex(item.link)" class="iconfont"></i>
        {{item.resourceName.replace('单位', '').replace('支队', '')}}
      </template>

      <template v-for="child in item.children">
        <menu-item
          v-if="child.children&&child.children.length>0"
          :item="child"
          :key="child.resourceId"/>
        <el-menu-item v-else :key="child.resourceId" :index="restIndex(child.link)"  v-bind:data-link="child.link">
          {{child.resourceName.replace('单位', '').replace('支队', '')}}
        </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    restIndex(link) {
      if (link.indexOf('/') > -1) {
        let arr = link.split('/')
        let name = arr[arr.length-1].replace('.html', '')
        return name
      }else {
        return link
      }
    }
  }
}
</script>
<style lang="scss">
.nav-wrap {
  .el-submenu__title {
    i {
      font-size: 22px;
      color: #fff;
    }
  }
  .el-menu-item {
    i {
      font-size: 22px;
      color: #fff;
    }
  }
}
.header-nav-son-item {
  margin-top: 5px;
  .el-menu {
    background-color: #FFF!important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
    .el-submenu__title,
    .el-menu-item {
      background-color: #FFF!important;
      color: #5F6472 !important;
      border-left: 3px solid #fff;
      // opacity: 0.5;
      &:hover,
      &:hover .el-submenu__title {
        border-left: 3px solid #5070D0;
        background-color: #FFF !important;
        color: #5070D0 !important;
        opacity: 1;
      }
    }
    .el-submenu {
      &.is-opened .el-submenu__title {
        border-left: 3px solid #5070D0;
        background-color: #FFF !important;
        color: #5070D0 !important;
        opacity: 1;
      }
      .el-menu {
        background-color: #FFF!important;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
        .el-menu-item {
          background-color: #FFF!important;
          color: #5F6472 !important;
          // opacity: 0.5;
          &:hover {
            border-left: 3px solid #fff;
            background-color: #FFF !important;
            color: #5070D0 !important;
            opacity: 1;
          }
        }
      }
    }
  }
}

.popper__arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -13px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #ebeef5;
    border-width: 6px;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      content: " ";
      border-width: 6px;
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: #fff;
    }
}
</style>
